<template>
  <div class="" style="margin: 0 auto;" :style="$store.state.print.devic != ''?'width:' + ($store.state.print.devic-20) + 'px;':'width: 970px;'">
    <div style="margin: 0 auto; background: #ffdc8b;" >
      <el-row>
        <el-col :span="14">
          <div class="inceter_cent_left" style="width: 100%;cursor: pointer">
            <el-carousel trigger="click" :height=" '320px' ">
              <el-carousel-item :class="{'apiIndec': Indx == index }" v-for="(item,index) in listswipei" :key="index">
                <img @click="Pathtps(item)" :src="API+ item.coverImage" />
                <div class="inceter_cent_left-top"></div>
                <div class="inceter_cent_left-top-nei">
                  {{item.title}}
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="inceter_cent_right" :style="'height:320px'">
            <aTab :tabNac="tabNac" :static="static" @tabNacCiick="tabNacCiick"></aTab>
            <div v-if="static == 0">
              <div class="cent_liIMg" style="" v-for="(item,index) in list" :key="index">
                <div class="dis" style="font-size: 15px;">
                  <div class="itemspan" @click="PathDE(item,'校园内外')">{{item.title}}</div>
                  <div class="timesc" style="overflow: hidden;height: 20px; text-align: right;">{{item.createTime}}</div>
                </div>
              </div>
              <div class="geng" @click="more('/inside/index','校园内外')">更多</div>
            </div>
            <div class="inceter_cent_right_itemRight" v-if="static == 1">
              <div class="cent_liIMg" style="" v-for="(item,index) in Messlist" :key="index">
                <div class="dis" style="font-size: 15px;">
                  <div class="itemspan" @click="PathDE(item,'消息通知')">{{item.title}}</div>
                  <div class="timesc" style="overflow: hidden;height: 20px; text-align: right;">{{item.createTime}}</div>
                </div>
              </div>
              <div class="geng" @click="more('/mess/index','消息通知')">更多</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- end -->
    <div class="martop10 inceter_cent_bg" style="margin: 10px auto;">
      <div style="width: 45%;">
        <div class="left_top" style="font-size: 32px;">贵阳市老年大学</div>
        <div class="left_bottom"><label>{{newYaer}}</label>年招生</div>
      </div>
      <div style="width: 45%; display: flex;align-items: center;">
        <div class="layui-btn" @click="HrefClick('http://gyold.maple.ren/Home/NewsInfo?NewsID=5')">
          <a href="#">操作教程</a>
        </div>
        <div class="layui-btn-lg" style="text-align: center;" @click="HrefClick('http://gyold.maple.ren/Home/Login')">
          <a href="#">点击报名</a>
        </div>
      </div>
    </div>
    <!-- end -->
    <div style="display: flex; justify-content: space-between;margin: 15px auto;position: relative;">
      <img class="leftset" src="../../../static/img/professional.png" />
      <div style="display: flex;justify-content: space-between;">
        <div class="imgp" :style="$store.state.print.devic != ''?'width:16%':''" v-for="(item,index) in essionalImg" @click="RouterClick(item,index)">
          <img style="width: 100%;height: 100%;" :key="index" :src="API + item.ksExt1" />
        </div>
      </div>
    </div>
    <!-- end -->
    <div>
      <div class="martop10" style="margin: 0px auto;">
        <div class="layui-line">
          <el-button class="layui-btn-danger">校园风采</el-button>
        </div>
      </div>
    </div>
    <div class="martop10" style="">
      <vue-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
        <div class="imgBox profes animate__animated fadeInRightBig">
          <div class="imgDiv " v-for="(item,index) in newsList" :key="index">
            <img @click="Pathtps(item)" style="margin-right: 20px; width: 100%; height: 100%;" :src="API + item.coverImage" />
          </div>
        </div>
      </vue-scroll>
    </div>
    <!-- end -->
    <div>
      <div class="mage" style="margin: 15px auto;">
        <div class="layui-line" style="margin-bottom: 3px;">
          <el-button class="layui-btn-danger">师资力量</el-button>
        </div>
      </div>
      <div class="martop10  " style="margin: 20px auto;margin-top: 2px;display: flex;justify-content: space-between;"
        :style="$store.state.print.devic<750?'width:' + ($store.state.print.devic-10) + 'px;marginTop:4px':'width: 100%;marginTop:10px'">
        <div class="profes" style="width: 89%;">
          <div class="fengcai" :style="$store.state.print.devic != ''?'width:11.9%':''" v-for="(item,index) in szll " :key="index">
            <img :src="API+item.tcImg" />
            <div>{{item.tcName}}</div>
          </div>
        </div>
        <div class="layui-szll-box-more" @click="more('/teachers/index','师资力量')">
          更多
        </div>
      </div>
    </div>
    <!-- end -->
    <div class="martop10 profes inceter_cent_bottom" style="width: 100%;margin-top: 12px;padding: 10px 0;" :style="$store.state.print.devic<750?'width:' + ($store.state.print.devic-10) + 'px':'width: 100%'">
      <div class="layui-jd-title">
        <img style="width: 100%;height: 100%;" src="../../../static/img/classic.png" />
      </div>
      <div class="inceter_cent_bottom_flex">
        <div style="padding: 8px;width: 22%;" v-for="(item,index) in dateLs" :key="item.name">
          <div class="layui-jd-box" style="position: relative;" >
            <p>{{item.name}}</p>
            <div>
              <ul>
                <li v-if="item.articleVOList.length>0" v-for="(it,index1) in item.articleVOList" :key="index1">
                  <div style="display: flex;align-items: center;">
                    <div class="yuan"></div>
                    <div class="lis" @click="moresp('/detail/index',it,item)">{{it.title}}</div>
                  </div>

                </li>
                <div style="padding-left: 50px;padding-top: 30px;text-align:left;font-size: 14px"  v-if="item.articleVOList.length==0">暂无数据</div>
              </ul>
            </div>
            <div class="more" @click="morespan(item,index)" v-if="item.articleVOList.length>0">
              更多
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import vueScroll from "vue-seamless-scroll";
  export default {
    components: {
      vueScroll
    },
    data() {
      return {
        user: {
          username: '',
          password: '',
        },
        tabNac: [{
            name: '校园内外'
          },
          {
            name: '消息通知'
          }
        ],
        static: 0,
        Messlist: [], //消息通知列表
        list: [], //校园内外文章列表
        listswipei: [], //文章轮播
        essionalImg: [],
        szll: [], //师资力量
        newYaer: '',
        dateLs: [],
        timer: null,
        theSpeed: this.speed,
        imgWidth: 260,
        newsList: [],
        API: '',
        Indx: 0,
        devicwidth: '',
        devic: ''
      }
    },
    created() {
      this.user.username = localStorage.getItem('username')
      this.user.password = localStorage.getItem('password')
      var date = new Date()
      this.newYaer = date.getFullYear()
      console.log('sss', process.env.KERNEL)
      this.API = process.env.KERNEL
    },
    computed: {
      optionLeft() {
        return {
          direction: 2,
          limitMoveNum: 2
        }
      }
    },
    mounted() {
      this.Info()
      this.devic = localStorage.getItem('devicwidth')
      this.devicwidth = Number(localStorage.getItem('devicwidth')) * 2.55 + 'px'
      var intc = document.getElementsByClassName('inceter_cent_right')
      console.log('--11----', intc[0].offsetHeight)
    },
    beforeDestroy() {
      this.$store.state.print.ksName = ''
      this.$store.state.print.tagId = ''
    },
    methods: {
      Info() {
        this.getSwiper()
        this.getCampusList()
        this.getMessList()
        this.getcountBizSiteVisit()
        this.selectStyleList()
        this.teacherList()
        this.selectSpecialList()
        this.ksList()
        if (!localStorage.getItem('visitAdd')) {
          this.getvisitAdd()
        }
      },

      Pathtps(item) {
        this.$router.push({
          path: '/detail/index',
          query: {
            id: item.id,
            tagId:item.tagsList[0].id
          }
        })
        localStorage.setItem('urlName', item.categoryName)
        this.$store.state.print.static = 5
      },
      RouterClick(item, index) {
        localStorage.setItem('tagId', item.id)
        this.$router.push({
          path: '/majorSetup/index?id=' + item.id
        })
        this.$store.state.print.ksName = item.ksName
        this.$router.push({
          path: '/majorSetup/index?id=' + item.id + '&static=' + index
        })
        this.$store.state.print.index = index
        this.$store.state.print.urlName = '专业设置'
        // console.log('setup',this.$store.state.print.index)
      },
      ksList() {
        var that = this
        that.$api.ksList().then(res => {
          if (res.code == 200) {
            let t = res.data.reverse()
            t.forEach((item, index) => {
              if (item.ksDesc == '器乐系') {
                t.splice(index)
              }
              t.push(item)
            })
            console.log('删除', t, res.data)
            that.essionalImg = t
          }
        })
      },
      //专栏列表
      selectSpecialList() {
        this.$api.selectSpecialList().then(res => {
          // console.log('sdsad2222',res)
          if (res.code == 200) {
            this.dateLs = res.data
          }
        })
      },
      //校园风采
      selectStyleList() {
        this.$api.selectStyleList().then(res => {
          if (res.code == 200) {
            this.newsList = res.data
          }
        })
      },
      teacherList() {
        var that = this
        var data = {
          pageNum: 0,
          pageSize: 8
        }
        that.$api.teacherList(data).then(res => {
          if (res.code == 200) {
            that.szll = res.rows
          }
        })
      },
      getvisitAdd() {
        var data = {
          url: this.$route.fullPath
        }
        this.$api.visitAdd(data).then(res => {})
      },
      //文章轮播
      getSwiper() {
        this.$api.getList().then(res => {
          if (res.code == 200) {
            this.listswipei = res.data
          }
        })
      },
      //消息通知
      getMessList(cata) {
        var data = {
          categoryId: 20,
        }
        this.$api.selectCampusList(data).then(res => {
          if (res.code == 200) {
            this.Messlist = res.data
          }
        })
      },
      //校园内外文章
      getCampusList(cata) {
        var data = {
          categoryId: 8,
        }
        this.$api.selectCampusList(data).then(res => {
          if (res.code == 200) {
            this.list = res.data
          }
        })
      },
      //浏览总量
      getcountBizSiteVisit() {
        this.$api.countBizSiteVisit().then(res => {
          if (res.code == 200) {
            localStorage.setItem('fontS', res.data)
          }
        })
      },
      tabNacCiick(i) {
        this.static = i
      },
      HrefClick(url) {
        window.open(url)
      },
      PathDE(item,name) {
        console.log(item,"shujjj ")
        localStorage.setItem('urlName', name)
        this.$store.state.print.urlName = name
        if (this.$store.state.print.devic == 1) {
          this.$router.push({
            path: '/details/index',
            query: {
              id: item.id,
              tagId:item.tagsList[0].id
            }
          })
        } else {
          this.$router.push({
            path: '/detail/index',
            query: {
              id: item.id,
              tagId:item.tagsList[0].id
            }
          })
        }
      },
      //更多
      more(url, name) {
        this.$router.push({
          path: url
        })
        localStorage.setItem('urlName', name)
        localStorage.setItem('index', 3)
        this.$store.state.print.index = 3
        this.$store.state.print.urlName = name
      },
      morespan(item, index) {
        console.log('item', item, index, this.$route)
        this.$store.state.print.urlName = index == 0 ? '专题专栏' : '学生之窗'
        if (index == 0) this.$router.push({
          path: '/research/index'
        })
        if (index == 1) this.$router.push({
          path: '/student/index?static=0'
        })
        if (index == 2) this.$router.push({
          path: '/student/index?static=1'
        })
        if (index == 3) this.$router.push({
          path: '/student/index?static=2'
        })
        if (index == 4) this.$router.push({
          path: '/student/index?static=4'
        })
        if (index == 5) this.$router.push({
          path: '/student/index?static=3'
        })
        if (index == 6) this.$router.push({
          path: '/student/index?static=4'
        })
        if (index == 7) this.$router.push({
          path: '/student/index?static=5'
        })
        // this.$router.push({
        //   path: '/detail/index?id=' + item.articleVOList[0].articleId + '&tagId=' + item.tagId
        // })
        localStorage.setItem('urlName', item.name)
      },
      moresp(url, item, i) {

        this.$router.push({
          path: url + '?id=' + item.articleId + '&tagId=' + i.tagId
        })
        // localStorage.setItem('urlName', i.name)
        // localStorage.setItem('index', 3)
        this.$store.state.print.ksName = ' '
        this.$store.state.print.urlName = i.name
        this.$store.state.print.index = 3
        this.$store.state.print.static = ''
      },
      Path(item) {
        this.$router.push({
          name: item.categoryName
        })
        localStorage.setItem('urlName', item.categoryName)
        this.$store.state.print.static = 5
      }
    }
  }
</script>

<style scoped>
  .imgDiv {
    cursor: pointer;
    width: 350px;
    height: 200px;
    margin-right: 20px;
  }

  .yuan {
    width: 8px;
    height: 8px;
    margin-right: 5px;
    border-radius: 50%;
    background: #333333;
  }

  .leftset {
    width: 150px;
    height: 134px;
  }

  .imgp {
    width: 128px;
    height: 134px;
    margin-left: 1px;
    cursor: pointer;
  }

  .imgp img {}

  .timesc {
    width: 120px;
    color: #666666;
  }

  .seamless-warp2 {
    overflow: hidden;
    width: 100%;
    height: 200px;
  }

  .inceter_cent_bottom_flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80%;
    /* background: #009688; */
    padding: 10px;
  }

  .layui-jd-box {
    /* width: 15%; */
    /*  */
    height: 164px;
    border: 1px solid #EA4410;
    border-radius: 4px;
    padding: 5px 2px;
  }

  .layui-jd-box ul li {
    margin-left: 10px;
    position: relative;
    font-size: 15px;
    margin-top: 5px;
  }

  .layui-jd-box ul li .lis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    color: #666666;
    /* font-size: 14px; */
    line-height: 25px;
    cursor: pointer;
  }

  .layui-jd-box ul li .lis:hover {
    color: #EA4410;
    text-decoration: underline;
  }

  .layui-jd-box .more:hover {
    color: #EA4410;
    cursor: pointer;
    text-decoration: underline;
  }

  .layui-jd-box p {
    font-size: 20px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .layui-jd-box .more {
    right: 1px;
    bottom: 5px;
    position: absolute;
    font-size: 15px;
    color: #666666;
    /* text-align: right; */
    /* margin-top: 10px; */
    margin-right: 10px;
  }

  .inceter_cent_bottom {
    background: #FDECE6;
  }

  .layui-jd-title {
    width: 152px;
    padding: 25px;
    height: 329px;
    text-align: center;
    margin-top: 20px;

  }

  .layui-jd-title img {
    width: 100%;
  }

  .fengcai {
    width: 100px;
    margin-right: 2px;
    text-align: center;
    font-size: 14px;
    height: 140px;
  }

  .fengcai img {
    width: 100%;
    height: 100%;
  }

  .layui-szll-box-more {
    width: 105px;
    height: 140px;
    font-size: 20px;
    background: #EA4410;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .layui-line {
    border-bottom: 2px solid #FF5722;
  }

  .layui-btn-danger {
    background-color: #FF5722;
    height: 40px;
    padding: 0 45px;
    font-size: 20px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: #ffffff;
  }

  .layui-btn-danger:hover {
    background-color: #FF5722;
  }

  .profes {
    display: flex;
    flex-direction: initial;

  }

  .essional {
    max-width: 140px;
    /* height: 134px; */
  }

  .left_top {
    font-family: Verdana;
    height: 50px;
    line-height: 50px;
    font-size: 32px;
    color: #8F98D5;
    margin-left: 185px;
  }

  .left_bottom {
    color: #8F98D5;
    font-size: 32px;
    font-family: Verdana;
    height: 50px;
    line-height: 50px;
    margin-left: 250px;
    margin-top: 10px;
  }

  .layui-btn-lg {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 3px 35px;
    background-color: #FFB800;
    color: #fff;
    font-size: 25px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 40px;
  }

  .layui-btn-lg a:hover {
    text-decoration: underline;
  }

  .layui-btn {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    padding: 3px 35px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 25px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    /* margin-left: 10px; */
  }

  a {
    text-decoration: none;
    color: #fff;
  }

  .layui-btn a:hover {
    text-decoration: underline;
  }

  .left_bottom label {
    color: rgb(234, 68, 16);
  }

  .inceter_cent_bg {
    background: url('../../../static/img/zs.png');
    height: 110px;
    /* line-height: 120px; */
    /* width: 100%; */
    /* background: #009688; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* -moz-background-size: 100% 100%; */
    display: flex;
    justify-content: space-between;
  }

  .inceter_cent_left {
    position: relative;
  }

  .inceter_cent_left img {
    width: 100%;
    height: 100%;
  }

  .inceter_cent_left-top {
    position: absolute;
    top: 0;
    z-index: 1000;
    height: 50px;
    background: #090909;
    opacity: 0.3;
    width: 100%;
    color: #ffffff;
  }

  .inceter_cent_left-top-nei {
    position: absolute;
    top: 0;
    z-index: 1001;
    font-size: 16px;
    color: #ffffff;
    padding-left: 20px;
    line-height: 50px;
  }


  .el-carousel__item:nth-child(2n) {
    /* background-color: #d3dce6; */
  }

  .el-carousel__item:nth-child(2n+1) {
    /* background-color: #d3dce6; */
  }

  .cent_liIMg {
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 10px 15px;
    font-size: 15px;
  }

  .dis {
    display: flex;
    align-items: center;
    width: 100%;
    /* font-size: 20px; */
    justify-content: space-between;
  }

  .itemspan {
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #666666;
  }

  .itemspan:hover {
    text-decoration: underline;
    color: #ea4410;
  }

  .geng {
    cursor: pointer;
    font-size: 18px;
    padding: 10px 15px;
    text-align: right;
    /* margin-bottom: 10px; */
    color: #666666;
  }

  .geng:hover {
    text-decoration: underline;
    color: #ea4410;
  }

  ul li {
    list-style: none;

  }
</style>
